<template>
  <SkeletonLoading v-if="initLoading" />
  <div class="expend-module" v-else>
    <CardWrap style="margin-top: 0">
      <div class="expend-total">
        <view class="expend-total-price">
          <span class="title">总支出</span>
          <ve-tooltip placement="bottom-start">
            <template #content>
              <view>1、总支出：为车辆购置费、购车其他费</view>
              <view>（购置税/过户费/运输费/保证金/手续费）、</view>
              <view>运维费用（维修/保养/年检/违章的代办真实成本）、</view>
              <view>运营成本、车辆借入之和</view>
              <view>2、车辆购置费及购车其他费属于公司整体支出，不属于</view>
              <view>某个门店，只有角色为管理员的用户登录时，选择</view>
              <view>全部门店时才可查看</view>
            </template>
            <ve-icon name="headertip" size="28" />
          </ve-tooltip>
        </view>
        <CardTotal :value="summaryData.totalAmount" unit="元" thousandth color="white" />
        <div class="expend-rate">
          <CardRate mode="vertical" :tb="summaryData.lastYearRate" :hb="summaryData.lastCycleRate" />
        </div>
      </div>
    </CardWrap>
    <CardWrap>
      <CardAlert>通过时间筛选统计数据时，运营成本取【费用发生日期】，其他费用取【应结日期】</CardAlert>
      <card
        :title="list.name"
        :icon="getTagItem(list.type).icon"
        big-size
        :rate="[4, 5].includes(list.type) ? undefined : { tb: list.lastYearRate, hb: list.lastCycleRate }"
        v-for="(list, index) in summaryData.expensesList"
        :key="index"
      >
        <template #tooltip>
          <div style="width: 360rpx; white-space: pre-wrap" v-html="getTagItem(list.type).tooltip"></div>
        </template>
        <CardTotal :value="list.totalAmount" unit="元" />
        <CardDivider />
        <div style="display: flex; flex-wrap: wrap">
          <template v-if="list.childrenList && list.childrenList.length">
            <CardCellGrop v-for="(item, i) in list.childrenList" :key="i">
              <CardCell :label="item.name" :value="item.totalAmount" primary />
              <CardCell
                color="black"
                :label="list.type == 1 ? '已付款' : '已结算'"
                :value="item.totalSettlementAmount"
                v-if="item.type != 8"
              />
              <CardCell
                color="black"
                :label="list.type == 1 ? '未付款' : '待结算'"
                :value="item.totalWaitSettlementAmount"
                v-if="item.type != 8"
              />
            </CardCellGrop>
          </template>
          <template v-else>
            <CardCellGrop>
              <CardCell label="已结算" color="black" :value="list.totalSettlementAmount" />
            </CardCellGrop>
            <CardCellGrop>
              <CardCell label="待结算" color="black" :value="list.totalWaitSettlementAmount" />
            </CardCellGrop>
          </template>
        </div>
        <div v-if="list.name == '车辆购置费'" class="extra-tip">
          <CardDivider />
          注：展示商户所有车辆的购置费总额及购置其他费，跳转后如数据缺失原因为您的机构权限不完整，请前往组织机构添加即可。
        </div>
      </card>
    </CardWrap>
  </div>
</template>
<script setup>
  import { ref } from 'vue'
  import card from '../components/card/index.vue'
  import CardCell from '../components/card/card-cell.vue'
  import CardWrap from '../components/card/card-wrap.vue'
  import CardTotal from '../components/card/card-total.vue'
  import CardDivider from '../components/card/card-divider.vue'
  import CardCellGrop from '../components/card/card-cell-group.vue'
  import CardAlert from '../components/card/card-alert.vue'
  import CardRate from '../components/card/card-rate.vue'
  import SkeletonLoading from '../components/skeleton-loading.vue'
  import { expensesStatistics } from '@/api/home/revenue'

  const props = defineProps({
    refreshUpdateTime: {
      type: Function,
      default: () => {},
    },
  })

  const summaryData = ref([])
  const initLoading = ref(true)
  // type:
  // 1-运营成本
  // 2-报销单费用
  // 3-付款单费用
  // 4-车辆购置费
  // 5-购车其他费
  // 6-车辆借入
  // 7-运维费
  // 8-保险费
  // 9-保养费
  // 10-维修费
  // 11-年检费
  // 根据type返回不同的值
  const getTagItem = (type) => {
    const tagItem = {
      1: { tooltip: '1、运营成本=报销单+付款单<br />2、付款状态取：未付款、已付款', icon: 'rs_xxdd' },
      7: { tooltip: '1、运维费总额=保险+保养+维修+年检的总额<br />2、已付款、未付款的费项都计算在内', icon: 'rs_price' },
      4: {
        tooltip:
          '1、车辆状态为空闲可租、租赁中、运维中、已借出车辆的购置费、购置补充费之和<br />2、不受门店限制，展示商户下所有车辆在筛选时间段内购置费总额，以及结算情况',
        icon: 'rs_price',
      },
      5: {
        tooltip:
          '1、购车其他费包含：购置税、过户费、运输费、保证金、手续费<br />2、不受门店限制，展示商户下所有车辆在筛选时间段内购车其他费总额，以及结算情况<br />3、登录管理员且选择全部门店时，展示车辆购置费及购车其他费用',
        icon: 'rs_price',
      },
      6: { tooltip: '1、统计借调-借入单下借调费(借入)、借调附加费（收付款）的总额<br />2、已付款、未付款的费项都计算在内', icon: 'rs_car' },
    }
    return tagItem[type] || { tooltip: '', icon: '' }
  }

  const loadData = (params = {}) => {
    const queryParam = {
      orgIdList: params.orgIdList,
      orderTimeQueryType: params.orderTimeQueryType,
      startTime: params.startTime,
      endTime: params.endTime,
      selectDateType: params.selectDateType,
    }
    expensesStatistics(queryParam).then((res) => {
      const result = res.result || {}
      summaryData.value = result
      initLoading.value = false
      uni.hideLoading()
      // 更新数据更新时间
      props.refreshUpdateTime(result.lastUpdateTime)
    })
  }
  defineExpose({
    loadData,
  })
</script>
<style lang="less" scoped>
  .expend-module {
    padding-bottom: 50rpx;
  }
  .expend-total {
    position: relative;
    height: 130rpx;
    width: 702rpx;
    padding: 16rpx 24rpx;
    box-sizing: border-box;
    font-weight: 400;
    font-size: 24rpx;
    color: #ffffff;
    line-height: 28rpx;
    background-image: url('@/static/images/rs_expend.png');
    background-size: 100% 100%;
    &-price {
      display: flex;
      margin-bottom: 14rpx;
      .title {
        margin-right: 8rpx;
      }
    }
    .expend-rate {
      position: absolute;
      right: 24rpx;
      top: 24rpx;
    }
  }

  .extra-tip {
    font-weight: 400;
    font-size: 24rpx;
    color: #1890ff;
    line-height: 34rpx;
  }
</style>
